<template>
  <!-- 配件询价 - 筛选下拉菜单 -->
  <!--  <view class="accessory-filter" :class="{'box-border': fromPage, 'padding-24': isSticky,'margin-24': !isSticky}">-->
  <view class="accessory-filter">
    <view class="down-section" :class="downStatus ? 'down-open' : 'down-close'">
      <u-dropdown
        active-color="#FDD421"
        ref="uDropdown"
        @open="open"
        @close="close"
        :borderBottom="false"
        duration="200"
      >
        <u-dropdown-item title="品牌配置">
          <view class="slot-content brand" style="background-color: #ffffff">
            <scroll-view
              scroll-y="true"
              style="height: 65vh"
              :scroll-into-view="pptoView"
            >
              <view class="brandcss" @tap="searchBrandAll">
                <view :class="allBrands === 1 ? 'allbrancolor' : 'allbran'"
                  >全部品牌</view
                >
                <view class="carnum"> {{ brandTotal }}辆 </view>
              </view>
              <view
                v-for="(item, index) in Brandlist"
                :id="item.initial"
                :key="item.initial"
              >
                <view class="Brandcss">
                  <view
                    class="list-cell"
                    v-for="(item1, index1) in item.data"
                    :key="index1"
                  >
                    <view class="brandcss" @tap="searchBrand(item1)">
                      <view class="iconimg">
                        <image
                          :src="
                            'https://files.yzsheng.com/goodimg/brandimg/' +
                            item1.bid +
                            '.png'
                          "
                          mode="aspectFit"
                        ></image>
                      </view>
                      <view
                        :class="
                          xuanzebrand === item1.bid ? 'brannameZT' : 'branname'
                        "
                        >{{ item1.brand }}</view
                      >
                      <view class="carnum"> {{ item1.carNumber }}条 </view>
                      <view class="Spin">
                        <view
                          :class="
                            xuanzebrand === item1.bid
                              ? 'ppjiantougo'
                              : 'ppjiantou'
                          "
                        >
                          <u-icon
                            name="arrow-right"
                            color="#9A9A9A"
                            size="24rpx"
                          ></u-icon>
                        </view>
                      </view>
                    </view>
                    <view class="xieliecss" v-if="xuanzebrand === item1.bid">
                      <view
                        class="xilie"
                        v-for="(item2, index2) in CartypeList"
                        :key="index2"
                      >
                        <view class="cartycss" @tap="XLsearchBrand(item2)">
                          <view
                            :class="
                              pzxuanzebrand === item2.carTypeId
                                ? 'xilienamezt'
                                : 'xiliename'
                            "
                            >{{ item2.carTypeName }}</view
                          >
                          <view class="Spin">
                            <view
                              :class="
                                pzxuanzebrand === item2.carTypeId
                                  ? 'ppjiantougo'
                                  : 'ppjiantou'
                              "
                            >
                              <u-icon
                                name="arrow-right"
                                color="#9A9A9A"
                                size="24rpx"
                              ></u-icon>
                            </view>
                          </view>
                        </view>
                        <view class="peizhibox">
                          <view
                            class="peizhicss"
                            v-if="pzxuanzebrand === item2.carTypeId"
                          >
                            <view
                              class="peizhi"
                              v-for="(item3, index3) in configureList"
                              :key="item3.id"
                            >
                              <view
                                :class="xuanzebrand ? 'peizhigo' : 'peizhixz'"
                              >
                              </view>
                              <view
                                class="peizhiname"
                                @click="Configuration(item3)"
                                >{{ item3.name }}</view
                              >
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="floor">
                <view
                  v-for="(item, index) in ppindexlist"
                  :data-id="item"
                  :key="index"
                  @tap="bindToView"
                >
                  {{ item }}
                </view>
              </view>
            </scroll-view>
          </view>
        </u-dropdown-item>

        <u-dropdown-item
          :title="typeTitle || '全部分类'"
          :options="categoryList"
          @change="categoryChange"
          v-model="categoryVal"
          height="500"
        ></u-dropdown-item>
        <u-dropdown-item title="地区">
          <view class="slot-content region" style="background-color: #ffffff">
            <scroll-view
              scroll-y="true"
              style="height: 65vh"
              :scroll-into-view="addtoView"
            >
              <view class="boxsds">
                <view class="brandcss" @tap="searchAddressAll">
                  <view class="alladdress">全部地区</view>
                </view>
                <view
                  v-for="(item, index) in Addresslist"
                  :id="item.liststr"
                  :key="item.liststr"
                >
                  <view class="abcd">
                    {{ item.liststr }}
                  </view>
                  <view class="Brandcss">
                    <view
                      class="list-cell"
                      v-for="(item1, index1) in item.data"
                      :key="index1"
                    >
                      <view class="brandcss" @tap="searchAddress(item1)">
                        <view class="area">{{ item1.name }}</view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="floor">
                  <view
                    v-for="(item, index) in addindexlist"
                    :data-id="item"
                    :key="index"
                    @tap="addressToView"
                  >
                    {{ item }}
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </u-dropdown-item>
        <u-dropdown-item
          :title="sortTitle || '排序'"
          :options="sortList"
          v-model="sortVal"
          @change="sortChange"
        ></u-dropdown-item>
      </u-dropdown>
    </view>

    <!-- 品牌、地区列表 - 弹出部分 -->
    <!-- 不用此弹出效果，所以v-if="false" -->
    <view
      v-if="false"
      class="popup-section"
      :style="{ visibility: listShow ? 'visible' : 'hidden' }"
    >
      <!-- 遮罩 -->
      <view
        :class="['mask', openIndex !== -1 ? 'mask-show' : '']"
        @click="closePopupSection"
      ></view>

      <view class="content" :class="openIndex !== -1 ? 'up-show' : ''">
        <!-- 内容 -->
        <view v-show="openIndex === 0">
          <brand-list
            @close="closePopupSection"
            @change="brandListChange"
          ></brand-list>
        </view>

        <view v-show="openIndex === 2">
          <region-list
            @close="closePopupSection"
            @change="regionChange"
          ></region-list>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import brandList from './brand-list.vue' // 品牌列表
import regionList from './region-list.vue' // 地区列表

export default {
  name: 'accessoryFilter',
  components: {
    brandList,
    regionList,
  },
  data() {
    return {
      sortTitle: '排序',
      typeTitle: '全部分类',
      openIndex: -1, // 下拉打开的标识，品牌是0，地区是1，筛选是2
      downStatus: false, // 下拉筛选打开状态

      // 配件分类筛选列表
      categoryList: [],

      // 排序筛选条件列表
      sortList: [
        {
          label: '默认排序',
          value: 0,
        },
        {
          label: '官寻',
          value: 1,
        },
        {
          label: '距离由近到远',
          value: 2,
        },
        {
          label: '发布时间排序',
          value: 3,
        },
      ],
      categoryVal: '',
      sortVal: '',

      //品牌
      pptoView: '',
      allBrands: 0, //全部品牌选中
      xuanzebrand: '',
      pzxuanzebrand: '',
      ConfigurationId: '',
      pageindex: 1,
      configureList: [],
      Brandlist: [],
      CartypeList: [], //车型配置
      ppindexlist: [
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z',
      ], //品牌ABC

      //地区
      addtoView: '',
      Addresslist: [], // 地址
      RegionId: '',
      addindexlist: [], //地址ABC
    }
  },

  props: {
    // isSticky: {
    //   type: Boolean,
    //   default: false,
    // },
    fromPage: {
      type: Number,
      default: 0,
    },
  },

  computed: {
    listShow() {
      return this.openIndex !== -1
    },
    //品牌车子总条数
    brandTotal() {
      let sum = 0
      if (this.Brandlist.length > 0) {
        this.Brandlist.forEach((item) => {
          item.data.forEach((c) => {
            sum += c.carNumber
          })
        })
      }

      return sum
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.getCategoryList()
     
      this.GetRegionByLevelList() //地区
    })
		setTimeout(()=>{
			 this.GetCarBrandList() //请求品牌接口
		},1000)
  },

  methods: {
    //配件分类列表
    getCategoryList() {
      this.$api.accessory
        .getCategoryList({
          parentId: 0,
        })
        .then((res) => {
          this.categoryList = res.data.map((item, index) => {
            return {
              label: item.name,
              value: item.id,
            }
          })
          this.categoryList.unshift({
            label: '全部',
            value: '',
          })
        })
        .catch((e) => {
          this.categoryList.unshift({
            label: '全部',
            value: '',
          })
          console.log(e)
        })
    },

    // 下拉打开
    open(index) {
      this.$emit('open', index)
      this.downStatus = true // 打开下拉菜单
      // if (index === 0 || index === 2) {
      //   this.openIndex = index
      // } else {
      //   this.downStatus = true // 打开下拉菜单
      // }
    },

    // 下拉关闭
    close(index) {
      this.downStatus = false // 打开下拉菜单
      this.$emit('close', index)
    },
    // 封装下拉筛选关闭方法
    downClose() {
      this.$refs.uDropdown.close()
      this.downStatus = false // 打开下拉菜单
    },

    // 关闭弹出列表的部分
    closePopupSection() {
      this.openIndex = -1
      this.downClose()
    },

    // 选择品牌车型款式
    brandListChange(id) {
      this.$emit('change', { type: 0, id })
    },

    // 选择地区
    regionChange(id) {
      this.$emit('change', { type: 2, id })
    },

    // 选择分类
    categoryChange(id) {
      console.log(id)
      this.typeTitle =
        this.categoryList.find((item) => item.value === id).label.substr(0, 4) +
        '...'
      this.$emit('change', { type: 1, id })
    },

    // 选择排序
    sortChange(id) {
      this.sortTitle =
        this.sortList.find((item) => item.value === id).label.substr(0, 4) +
        '...'
      this.$emit('change', { type: 3, id })
    },

    //品牌相关
    searchBrandAll() {
      this.allBrands = 1
      this.xuanzebrand = '' //取消品牌选择
      this.pzxuanzebrand = '' //取消系列选择
      this.ConfigurationId = ''
      //选择品牌车子重新调取接口
      this.pageindex = 1
      this.$emit('change', { type: 0, id: '' })
      this.$refs.uDropdown.close()
    },

    // 品牌接口请求
    async GetCarBrandList() {
      // vuex仓库里有品牌列表，则无需再请求
      let list = this.$store.state.indexHome.carBrandList
      if (list.length !== 0) {
        this.Brandlist = list
        return false
      }
      
      try {
        const res = await this.$api.common.GetCarBrandList()
        this.Brandlist = res.data
      } catch (err) {
        console.log(err)
      }
    },

    //选择品牌
    searchBrand(type) {
      if (this.xuanzebrand === type.bid) {
        this.xuanzebrand = ''
        return
      }
      this.xuanzebrand = type.bid
      this.allBrands = 0 //取消全部品牌
      this.GetCarModelAndConfigList(type.bid)
      //this.$refs.uDropdown.close() //关闭弹窗
    },

    // 车型配置接口请求
    async GetCarModelAndConfigList(typeid) {
      try {
        let data = {
          Bid: typeid,
        }
        const res = await this.$api.common.GetCarModelAndConfigList(data)
        this.CartypeList = res.data.cartypeList
        console.log(this.CartypeList)
      } catch (err) {
        console.log(err)
      }
    },

    //选择系列
    XLsearchBrand(type) {
      if (this.pzxuanzebrand === type.carTypeId) {
        this.pzxuanzebrand = ''
        return
      }
      this.pzxuanzebrand = type.carTypeId
      this.configureList = type.carList[0].list
    },

    //选择配置关闭并搜索
    Configuration(type) {
      this.ConfigurationId = type.id
      //选择品牌车子重新调取接口
      this.pageindex = 1
      this.$emit('change', { type: 0, id: type.id })
      this.$refs.uDropdown.close()
    },

    // 品牌楼层定位
    bindToView(event) {
      this.pptoView = event.currentTarget.dataset.id
    },

    //地区相关

    // // 地区接口
    async GetRegionByLevelList(typeid) {
      try {
        let data = {
          Level: 2,
          KeyWords: '',
        }
        const res = await this.$api.common.GetRegionByLevelList(data)
        this.Addresslist = res.data.data
        this.addindexlist = res.data.liststr
      } catch (err) {
        console.log(err)
      }
    },

    searchAddressAll() {
      this.RegionId = ''
      //获取地区ID，重新调取接口
      this.pageindex = 1
      this.$emit('change', { type: 2, id: '' })
      this.$refs.uDropdown.close() //关闭弹窗
    },

    //选择地址
    searchAddress(type) {
      this.RegionId = type.id
      //获取地区ID，重新调取接口
      this.pageindex = 1
      this.$emit('change', { type: 2, id: type.id })
      this.$refs.uDropdown.close() //关闭弹窗
    },

    // 地址楼层定位
    addressToView(event) {
      this.addtoView = event.currentTarget.dataset.id
    },
  },
}
</script>

<style lang="scss" scoped>
.margin-24 {
  margin: 0 24rpx;
}
.padding-24 {
  padding: 0 24rpx;
}
.box-border {
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.14);
}
.accessory-filter {
  position: relative;
  width: 100%;
  // z-index: 888;
  background-color: #fff;
  padding-top: 0;

  // 品牌、地区弹出部分
  .popup-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 899;
    overflow: hidden;
    width: 100%;
    height: 100%;

    .content {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 902;
      width: 100%;
      transform: translateY(100%);
      transition: all 0.3s;

      &.up-show {
        transform: translateY(10%) !important;
      }
    }

    // 遮罩层
    .mask {
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;

      &.mask-show {
        visibility: visible;
        opacity: 0.5;
      }
    }
  }

  .down-sticky {
    .down-rela {
      position: relative;
    }
  }

  // 下拉菜单打开时，给下拉菜单设置高度
  .down-open {
    & /deep/ .u-dropdown__content {
      height: 100vh !important;
    }
  }
  .down-close {
    & /deep/ .u-dropdown__content {
      height: 0 !important;
    }
  }

  .btn {
    width: 100%;
    background-color: #fff;
    display: flex;
  }

  button:first-child {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffe23e;
    line-height: 88rpx;
    width: 331rpx;
    height: 88rpx;
    background: #333333;
    margin: 20rpx 0 20rpx 20rpx;
    border-radius: 44rpx 0rpx 0rpx 44rpx;
  }

  button:last-child {
    margin: 20rpx 20rpx 20rpx 0;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 88rpx;
    width: 331rpx;
    height: 88rpx;
    background: linear-gradient(-90deg, #fdd421, #ffe23e);
    border-radius: 0rpx 44rpx 44rpx 0rpx;
  }

  .sj {
    background-color: #fff;

    text {
      margin-left: 50rpx;
      line-height: 50rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
  }
}
// 筛选 商家类型
.type-box {
  background-color: #fff;

  .pinp {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    view {
      margin: 20rpx 0 0 42rpx;
      width: 170rpx;
      height: 70rpx;
      background: #f4f4f4;
      border-radius: 35rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 70rpx;
      text-align: center;

      &.active {
        background: linear-gradient(-90deg, #fdd422, #ffe23e) !important;
        border-radius: 35px;
      }
    }
  }

  .line {
    width: calc(100% - 84rpx);
    margin: 40rpx auto 20rpx;
    border-top: 2rpx solid #eee;
  }

  .sort {
    display: flex;

    view {
      width: 170rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      background: #f4f4f4;
      border-radius: 35rpx;
      margin: 20rpx 0 0 42rpx;

      &.active {
        background: linear-gradient(-90deg, #fdd422, #ffe23e) !important;
        border-radius: 35px;
      }
    }
  }
}

.brand {
  .Brandcss {
    background: rgba(255, 255, 255, 1);
    // border-radius: 10rpx;

    .list-cell {
      box-sizing: border-box;
      width: 100%;
      padding: 10rpx 0px 0px 0px;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      border-bottom: 1px solid #eeeeee;
    }

    .iconimg {
      image {
        width: 66rpx;
        height: 66rpx;
      }
    }

    .brannameZT {
      text-align: left;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fbb000;
      line-height: 80rpx;
      margin-left: 50rpx;
      width: 50%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .branname {
      text-align: left;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 80rpx;
      margin-left: 50rpx;
      width: 50%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .Spin {
      width: 100rpx;
      padding-left: 30rpx;
    }

    .ppjiantougo {
      margin-top: 10rpx;
      width: 10%;
      text-align: center;
      font-size: 32rpx;
      color: #666666;
      transform: rotate(90deg);
      transition: 0.5s;
      padding-right: 20rpx;
    }

    /* 折叠 */
    .ppjiantou {
      margin-top: 10rpx;
      width: 10%;
      text-align: center;
      font-size: 32rpx;
      color: #666666;
      transform: rotate(0deg);
      transition: 0.5s;
      padding-right: 20rpx;
    }

    .cartycss {
      display: flex;
      flex-direction: row;
    }

    .xilienamezt {
      text-align: left;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fbb000;
      line-height: 80rpx;
      margin-left: 114rpx;
      width: 520rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .xiliename {
      text-align: left;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 80rpx;
      margin-left: 114rpx;
      width: 520rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .brandcss {
    display: flex;
    flex-direction: row;
  }

  .allbrancolor {
    line-height: 80rpx;
    width: 56%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 36rpx;
    color: #fbb000;
  }

  .allbran {
    line-height: 80rpx;
    width: 56%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 36rpx;
    color: #666666;
  }

  .carnum {
    margin-top: 10rpx;
    width: 30%;
    text-align: right;
    font-size: 32rpx;
    color: #666666;
  }

  .peizhibox {
    .peizhicss {
      background: #f6f6f6;
      border-radius: 10rpx;
      padding: 22rpx;
      width: 642rpx;

      .peizhi {
        padding: 4rpx 0rpx;
        display: flex;
        flex-direction: row;

        /* 未选 */
        .peizhixz {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-top: 3rpx;

          image {
            margin-left: 16rpx;
            width: 40rpx;
            height: 40rpx;
            transform: rotate(-90deg);
          }
        }

        /* 已选配置 */
        .peizhigo {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-top: 3rpx;

          image {
            margin-left: 16rpx;
            width: 40rpx;
            height: 40rpx;
            transform: rotate(0deg);
          }
        }

        .peizhiname {
          text-align: left;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-left: 90rpx;
          width: 520rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}

.region {
  .boxsds {
    background-color: #ffffff;

    .brandcss {
      display: flex;
      flex-direction: row;
    }

    .alladdress {
      line-height: 80rpx;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      border-bottom: 1px solid #eeeeee;
    }
  }

  .abcd {
    padding: 10rpx 0rpx;
  }

  .Brandcss {
    background: rgba(255, 255, 255, 1);
    // border-radius: 10rpx;

    .list-cell {
      box-sizing: border-box;
      width: 100%;
      padding: 10rpx 0px 0px 0px;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      border-bottom: 1px solid #eeeeee;
    }
    .brandcss {
      display: flex;
      flex-direction: row;

      .area {
        text-align: left;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 80rpx;
        width: 50%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.floor {
  position: fixed;
  top: 50rpx;
  right: 30rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #fbb000;
}
// 筛选选中样式
.slot-content {
  background-color: #ffffff;
  padding: 24rpx;
  // border-radius: 0px 0px 20rpx 20rpx;
  // position: absolute;
  // width: 100%;
  .Merctype {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .item-box {
    margin-bottom: 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 28rpx;
    border-bottom: 1px solid #eeeeee;

    .item {
      color: #666666;
      padding: 16rpx 40rpx;
      border-radius: 100rpx;
      margin-top: 30rpx;
      background: #f4f4f4;
    }

    // 选中之后
    .active {
      color: #333333;
      background: linear-gradient(-90deg, #fdd422, #ffe23e);
    }
  }
  .item-asce {
    margin-bottom: 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 28rpx;

    .item {
      color: #666666;
      padding: 16rpx 40rpx;
      border-radius: 100rpx;
      background: #f4f4f4;
    }
    // 选中之后
    .active {
      color: #333333;
      background: linear-gradient(-90deg, #fdd422, #ffe23e);
    }
  }
}
</style>
